<!DOCTYPE html>
<html>
<head>
    <title>Zabuto | Calendar | Navigation Settings</title>
    <meta name="robots" content="noindex, nofollow">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- jQuery CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- Example style -->
    <link rel="stylesheet" type="text/css" href="//zabuto.com/assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- Zabuto Calendar -->
    <script src="../zabuto_calendar.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../../css/frame/calendars/zabuto_calendar.min.css">

</head>
<body>

<!-- container -->
<div class="container example">

    <h1>
        Calendar <span>Navigation Settings</span>
        <ul class="nav nav-pills pull-right">
            <li><a class="pull-right" href="language_settings.html">&laquo; Language Settings</a></li>
            <li><a class="pull-right" href="display_settings.html">Display Settings &raquo;</a></li>
        </ul>
    </h1>

    <hr>

    <p>You can alter the navigation of the calendar in several ways:</p>
    <table>
        <tr>
            <th>year</th>
            <td class="type">integer</td>
            <td>Initialize the calendar in a different year than the current year.</td>
        </tr>
        <tr>
            <th>month</th>
            <td class="type">integer</td>
            <td>Initialize the calendar in a different month than the current month (January=1, December=12).</td>
        </tr>
        <tr>
            <th>show_previous</th>
            <td class="type">boolean|integer</td>
            <td>Disable the navigation to previous months completely or only allow a maximum number of months.</td>
        </tr>
        <tr>
            <th>show_next</th>
            <td class="type">boolean|integer</td>
            <td>Disable the navigation to next months completely or only allow a maximum number of months.</td>
        </tr>
    </table>

    <hr>

    <div class="row">
        <div class="col-xs-5">

            <div id="my-calendar"></div>

            <script type="application/javascript">
                $(document).ready(function () {
                    $("#my-calendar").zabuto_calendar({
                        year: 2015,
                        month: 3,
                        show_previous: false,
                        show_next: 2
                    });
                });
            </script>

        </div>
        <div class="col-xs-6 col-xs-offset-1">

<code>
&lt;!-- set the calendar to March 2015 do not allow previous months
     and only allow 2 months in the future --&gt;
&lt;script type=&quot;application/javascript&quot;&gt;
  $(document).ready(function () {
    $(&quot;#my-calendar&quot;).zabuto_calendar({
      <span>year: 2015,
      month: 3,
      show_previous: false,
      show_next: 2</span>
    });
  });
&lt;/script&gt;
</code>

        </div>
    </div>

</div>
<!-- /container -->

</body>
</html>
